<script setup lang="jsx">
import { reactive, ref } from 'vue';
import { UUID } from 'uuidjs';
import { parseTime } from '@/utils';
import {
  basicmodelarealist,
  basicmodelequipmentlist,
  addfactoryequipmentdata, // 新增
  defactoryequipmentdata, // 删除
  edfactoryequipmentdataupdate, // 修改
  devicestatuslist, // 设备状态
  devicetypelist,
  manufacturermodellist,
  processlinecodelist,
  usergrouplist
} from '@/service/api/modules/erp';

import Modal from '@/components/common/modal.vue';
import Search from './modules/search.vue';

const searchParams = ref({
  equipmentStatus: '',
  equipmentName: '',
  lineName: '',
  locationId: null
});

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const columns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 100,
    align: 'center',
    checked: true
  },
  {
    key: 'equipmentName',
    dataIndex: 'equipmentName',
    title: '设备名称',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipmentId',
    dataIndex: 'equipmentId',
    title: '设备代码',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipmentType',
    dataIndex: 'equipmentType',
    title: '设备类型',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipmentVendorModel',
    dataIndex: 'equipmentVendorModel',
    title: '厂商型号',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lineName',
    dataIndex: 'lineName',
    title: '线体名称',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lineId',
    dataIndex: 'lineId',
    title: '线体代码',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'userGroup',
    dataIndex: 'userGroup',
    title: '使用部门',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'locationId',
    dataIndex: 'locationId',
    title: '工作位置',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipmentStatus',
    dataIndex: 'equipmentStatus',
    title: '状态',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.createDate == null) {
        return null;
      }
      return parseTime(record.createDate);
    }
  },
  {
    key: 'lmTime',
    dataIndex: 'lmTime',
    title: '修改时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.lmTime == null) {
        return null;
      }
      return parseTime(record.lmTime);
    }
  },
  {
    key: 'lmUser',
    dataIndex: 'lmUser',
    title: '修改人',
    width: 60,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
const formState = ref({});
const detailsVisibleQrcode = ref(false);

const tableData = ref([]);
const loading = ref(false);
const defaultExpandedRowKeys = ref([]);

const optionsName = ref([{ label: 'HBJL' }]);

// 工厂位置类型
const options = ref([]);
function basicmodelarealists() {
  basicmodelarealist().then(({ error, data }) => {
    if (!error) {
      options.value = data;
    }
  });
}
basicmodelarealists();
// 设备类型
const devices = ref([]);
function devicetypelists() {
  devicetypelist().then(({ error, data }) => {
    if (!error) {
      devices.value = data;
    }
  });
}
devicetypelists();
// 厂商型号
const manufacturer = ref([]);
function manufacturermodellists() {
  manufacturermodellist().then(({ error, data }) => {
    if (!error) {
      manufacturer.value = data;
    }
  });
}
manufacturermodellists();
// 用户群组usergroup--usergrouplist
const usergroup = ref([]);
function usergrouplists() {
  usergrouplist().then(({ error, data }) => {
    if (!error) {
      usergroup.value = data;
    }
  });
}
usergrouplists();
// 制程线代码
const processl = ref([]);
function processlinecodelists() {
  processlinecodelist().then(({ error, data }) => {
    if (!error) {
      processl.value = data;
    }
  });
}
processlinecodelists();

// 设备状态接口
// const devicestatus = ref([]);
// function devicestatuslists() {
//   devicestatuslist().then(({ error, data }) => {
//     if (!error) {
//       devicestatus.value = data;
//     }
//   });
// }
// devicestatuslists();

function getData() {
  loading.value = true;
  basicmodelequipmentlist({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchParams.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
          item.uid = UUID.genV4().hexNoDelim;
        });
        tableData.value = data.list;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const formTit = ref('');

// 点击新增
function manualSyncing() {
  crDatas.value = {};
  detailsVisibleQrcode.value = true;
}
// 点击修改
const selectedRowKeys = ref([]);
function tableSelectChange(val) {
  selectedRowKeys.value = val;
}
function updateSyncing() {
  if (selectedRowKeys.value.length !== 1) {
    return window.$message?.error('请选择一条数据');
  }
  const selectData = tableData.value.filter(item => selectedRowKeys.value.includes(item.equipmentUuid));
  formTit.value = '工厂设备数据修改';
  formState.value = selectData[0];
  detailsVisibleQrcode.value = true;
}
// 点击删除
function deleteSyncing() {
  if (selectedRowKeys.value.length == 0) {
    return window.$message?.error('请选择数据');
  }
  const deleteData = selectedRowKeys.value;
  defactoryequipmentdata(deleteData).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('删除成功');
      getData();
    }
  });
}
getData();

function search() {
  pagination.current = 1;
  getData();
}

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      background: record.uid === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.uid === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.uid;
    }
  };
};
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="search()" @search="search()" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="manualSyncing">
          <span class="ml-3px">新增</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="updateSyncing">
          <span class="ml-3px">修改</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="deleteSyncing">
          <span class="ml-3px">删除</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <!-- 表格数据 -->
      <STable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: tableSelectChange }"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="equipmentUuid"
        :default-expand-all-rows="true"
        :scroll="{ x: 2000, y: 'auto' }"
        :pagination="pagination"
        class="h-full"
        :custom-row="customRow"
        :row-height="23"
      />
      <!-- 新增表格 -->
      <Modal v-model:visible="detailsVisibleQrcode" :destroy-on-close="true" title="新增" width="700px">
        <div class="event-form">
          <AForm :model="formState" name="basic" :label-col="{ span: 6 }">
            <ARow :gutter="24">
              <ACol :span="12">
                <AFormItem label="手机号码" name="phone">
                  <AInput v-model:value="formState.phone" />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem label="手机号码" name="phone2">
                  <AInput v-model:value="formState.phone2" />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem label="手机号码" name="phone3">
                  <AInput v-model:value="formState.phone3" />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem label="手机号码" name="phone4">
                  <AInput v-model:value="formState.phone4" />
                </AFormItem>
              </ACol>
            </ARow>
          </AForm>
        </div>

        <template #footer>
          <div class="modal-footer">
            <AButton @click="detailsVisibleQrcode = false">关闭</AButton>
            <AButton type="primary" @click="boundUpdata">保存</AButton>
          </div>
        </template>
      </Modal>
    </ACard>
  </div>
</template>

<style></style>
